<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="js/static/h-ui.admin/css/H-ui.login.css" rel="stylesheet" type="text/css" />
<script id="header" type="text/javascript" src="js/header.js?head=./"></script>
<title>后台系统</title>
</head>
<body>
<!-- <div class="header"></div> -->
<div class="loginWraper">
  <div id="loginform" class="loginBox">
    <form class="form form-horizontal" action="/bigDateWeb/doLogin" method="post">
      <div class="row cl">
        <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60d;</i></label>
        <div class="formControls col-xs-8">
          <input id="username" name="username" type="text" placeholder="账户" class="input-text size-L">
        </div>
      </div>
      <div class="row cl">
        <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60e;</i></label>
        <div class="formControls col-xs-8">
          <input id="password" name="password" type="password" placeholder="密码" class="input-text size-L">
        </div>
      </div>
      <div class="row cl">
        <div class="formControls col-xs-8 col-xs-offset-3">
          <input class="input-text size-L" id="code" name="code" type="text" placeholder="验证码"  style="width:150px;">
          <img id="safecode" style="vertical-align: top;cursor: pointer;" onclick="javascript:reloadVerifyCode();" >
          <a  href="javascript:;" onclick="javascript:reloadVerifyCode();">看不清，换一张</a> </div>
      </div>
      <div class="row cl">
        <div class="formControls col-xs-8 col-xs-offset-3">
        	<label for="online" id="msg" style="color: red;">
									</label>
        </div>
      </div>
      <div class="row cl">
        <div class="formControls col-xs-8 col-xs-offset-3">
          <input name="" type="submit" class="btn btn-success radius size-L" value="&nbsp;登&nbsp;&nbsp;&nbsp;&nbsp;录&nbsp;">
          <input name="" type="reset" class="btn btn-default radius size-L" value="&nbsp;取&nbsp;&nbsp;&nbsp;&nbsp;消&nbsp;">
        </div>
      </div>
    </form>
  </div>
</div>
<div class="footer">Copyright 2016-2019  成都市有限公司 蜀ICP备12008286号</div>

</body>
<script type="text/javascript">
let vertifyTime;
breakout_of_frame();
// function reloadVerifyCode(){
// 	document.getElementById("safecode").innerText=Math.floor((Math.random()*9+1)*1000);
// };

function reloadVerifyCode(){
  vertifyTime=Date.now();
  document.getElementById("safecode").src="verifiCode?t="+vertifyTime;
};

window.onload=function(){
  reloadVerifyCode();
	document.querySelector("form").onsubmit=function(e){
		e.preventDefault();
        let userName=document.querySelector("#username").value;
        if(!/.{4,16}/.test(userName)){
          layer.msg("账号格式有误，请输入4-16位账号");
          return false;
        }
        let password=document.querySelector("#password").value;
        if(!/(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*.]{6,18}/.test(password)){
          layer.msg("密码格式有误，请输入8-16位大小写字母、数字、特殊符号组成的密码字符串");
          return false;
        }
        let safecode=document.getElementById("code").value;
        if(safecode.length!=4){
          layer.msg("请输入4位验证码");
          return false;
        }
		fetch("/bigDateWeb/doLogin",{
			method: 'post',
			headers: {
				'Content-Type': 'application/json;charset=utf-8;'
			},
			body:JSON.stringify({
				username:userName,
				password:password,
			                safecode:safecode,
				vertifyTime:vertifyTime
			})
		}).then(response=>{
			if(response.status==200){
				sessionStorage.setItem("loginName",userName);
				location.href="/bigDateWeb/success"
			}else if(response.status==401){
				layer.msg("验证码过期，重新获取");
				reloadVerifyCode();
			}else if(response.status==402){
				layer.msg("验证码有误，重新输入");
				reloadVerifyCode();
			}else if(response.status==404){
				layer.msg("账号或密码错误");
			}else{
				layer.msg("未知的异常，请联系管理员XXX");
			}
		});
	}
}
</script>
</html>